<template>
  <div class="index-container">
    <!--顶部导航栏-->
    <Navbar class = "navbar"  id="nav" ></Navbar>
    <!--顶部图片-->
<!--    <HeadPhoto  id="header-photo" :class="{'m-display-none':focusMode}" class="head-photo" v-if="$route.name==='Index'" @fatherMethod="fatherMethod"></HeadPhoto>-->

    <!--使用弹性盒子实现左右结构-->
    <div class="index-main" id="index" >

      <!--左侧-->
      <div  class="index-main-column-left">
        <HotTab class="tabs" ></HotTab>

      </div>

      <!--右侧-->
      <div  class="index-main-column-right">

        <RightCard></RightCard>



        <StackedLineChart v-if="slshow"></StackedLineChart>

        <CalendarPie v-if="cpshow"></CalendarPie>

        <Calendar></Calendar>

        <WordCloud v-if="wcshow" style="margin-top: 35px"></WordCloud>
      </div>

    </div>

    <!--回到顶部-->
    <el-backtop style="box-shadow: none;background: none;">
      <i alt="" src="../assets/toTopLogo.webp" style="width: 40px;height: 40px;"></i>
    </el-backtop>
    <!--底部footer-->
    <Footer class="index-foot"></Footer>

  </div>
</template>




<script>

import Navbar from "../components/Navbar";
import Footer from "../components/Footer";
import RightCard from "../components/Announcement";
import Calendar from "../components/Calendar";
import HotTab from "../components/HotTab";
import StackedLineChart from "../components/StackedLineChart";
import CalendarPie from "../components/CalendarPie";
import WordCloud from "../components/WordCloud";

export default {
  name: "Index",
  components: {RightCard, Footer, Navbar, Calendar,HotTab,StackedLineChart,CalendarPie,WordCloud},
  data() {
    return {
      wcshow: false,
      slshow: false,
      cpshow: false,
    }
  },
  methods:{
    getChartInfo(){
      const _this = this
      this.$axios.get(this.$base_url+'sys/chartinfo').then(res => {
        for (let item of res.data.data) {
          switch (item.chartname){
            case '词云图':
              _this.wcshow=true;
              break
            case '近七天堆叠图':
              _this.slshow=true;
              break
            case '日历饼图':
              _this.cpshow=true;
              break
          }
        }
      })
    },
  },
  mounted() {
    this.getChartInfo()
  }
}


</script>


<style scoped>


.index-container {
  min-height: 100vh;
  background-image: url("https://cdn.jsdelivr.net/gh/yubifeng/blog-resource/bloghosting/2021/04/23/first87.png")!important;
  background-repeat: repeat-x;
  background-attachment:fixed;
  background-size:cover;
}

.navbar {
  top: 0;
  z-index:9999;
  width: 100%;
  opacity: 0.9;
}


.index-foot {
  background-color: #333333;
  color: white!important;
  opacity: 0.9;


}

.index-main {
  display: flex;
  margin-top: 10px;
  margin-bottom: 40px;
  padding-top: 20px;
  margin-left: auto !important;
  margin-right: auto !important;
  opacity: 0.97;
}



.index-main-column-left {

  padding: 0;
  margin-right: 20px;
  margin-left: 30px;
}

.index-main-column-right {
  padding: 0;
  margin-left: 20px;
  margin-right: 30px;
}

.m-display-none {
  display: none !important;
}

.tabs {
  width: 700px;
  background-color: white;
}

</style>